<template>
	<view class="container">
		<view class="banner">
			<image src="https://img-shop.qmimg.cn/s23107/2020/04/26/3eb7808bf105262604.jpg" class="bg"></image>
			<view class="intro">
				<view class="greet">你好,{{isLogin ? userInfo.nickName : '游客'}}</view>
				<view class="note">{{noteInfo}}</view>
			</view>
		</view>
		<view class="content">
			<view class="entrance">
				<view class="item" @tap="takein">
					<image src="../../static/images/index/zq.png" class="icon"></image>
					<view class="title">自取</view>
				</view>
				<view class="item" @tap="takeout">
					<image src="../../static/images/index/wm.png" class="icon"></image>
					<view class="title">外卖</view>
				</view>
			</view>
		</view>
		<view class="info">
			<!-- 积分 -->
			<view class="integral-section">
				<view class="top">
					<view class="title">我的积分</view>
					<view class="value"></view>
				</view>
				<view class="bottom">
					进入积分商城兑换奈雪卷及周边好礼
					<view class="iconfont iconarrow-right">
					</view>
				</view>
			</view>
			<!-- 会员码 -->
			<view class="qrcode-section">
				<image src="../../static/images/index/qrcode.png" class="image"></image>
				<text>会员码</text>
			</view>
		</view>
		<view class="navigator">
			<view class="left">
				<view class="grid flex-column just-content-center">
					<view class="d-flex align-items-center">
						<image src="../../static/images/index/csc.png" class="mark-img"></image>
						<view class="font-size-sm text-color-base">奈雪的茶商铺</view>
					</view>
					<view class="text-color-assist left-text">优质茶礼盒,网红零食</view>
				</view>
				<view class="grid justify-content-end align-items-end">
					<image src="../../static/images/index/yzclh.png"  class="yzclh-image"></image>
				</view>
			</view>
			<view class="right">
				<view class="tea-activity">
					<image src="../../static/images/index/mcsb.png" class="mark-img"></image>
					<view>买茶送包</view>
					<view class="right-img">
						<image src="../../static/images/index/mcsb_bg.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="member-gifts">
					<image src="/static/images/index/hyjb.png" class="mark-img"></image>
					<view>会员劵包</view>
					<view class="right-img">
						<image src="/static/images/index/hyjb_bg.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="member-news">
			<view class="header">
				<view class="title">会员新鲜事</view>
				<view class="iconfont iconRightbutton"></view>
			</view>
			<view class="list">
				<view class="item">
					<image src="https://img-shop.qmimg.cn/s23107/2020/04/27/0039bf41c9ebd50a2c.jpg"></image>
					<view class="title">"梅"你不行 | 霸气杨梅清爽回归</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		data() {
			return {
				noteInfo: '一杯奶茶,一口软欧包,在奈雪遇见来两种美好'
			}
		},
		onLoad() {
			
		},
		computed:{
			...mapState(['isLogin', 'userInfo', 'chooseStore'])
		},
		methods: {
			takein() {
				console.log('chooseStore===>', this.chooseStore)
				if(this.chooseStore) {
					uni.navigateTo({
						url: '../stores/stores'
					})
				}
				{
					console.log(2)
					this.$store.commit('SET_ORDER_TYPE', 'takein')
					uni.switchTab({
						url: '../menu/menu'
					})
				}
			},
			/** 外卖点单 **/
			takeout() {
				if(!this.isLogin) {
		            uni.navigateTo({url: '/pages/login/login'})
					return
				}
				uni.navigateTo({
						url: "/pages/address/address"	
					})
			}
		}
	}
</script>

<style lang="scss">
	.banner {
		position: relative;
		height: 600rpx;
		width: 100%;
		// 背景图片
		.bg {
			height: 600rpx;
			width: 100%;
		}
		.intro {
			position: absolute;
			display: flex;
			flex-direction: column;
			color: #fff;
			top: calc(50rpx + var(--status-bar-height));
			left: 40rpx;
			.greet {
				font-size: $font-size-lg;
				margin-bottom: 10rpx;
			}
			.note {
				font-size: $font-size-sm;
			}
		}
	}
	.content {
		padding: 0 30rpx;
	}
	.entrance {
		position: relative;
		margin: -80rpx 0 30rpx 0;
		border-radius: 10rpx;
		background-color: #fff;
		box-shadow: $box-shadow;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 30rpx 0;
		
		.item {
			position: relative;
			display: flex;
			flex: 1;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			
			&:nth-child(1):after {
				content: '';
				position: absolute;
				width: 1rpx;
				background-color: $text-color-assist;
				right: 0;
				height: 100%;
				transform: scaleX(0.5) scaleY(0.8);
			}
			
			.icon {
				width: 84rpx;
				height: 84rpx;
				margin: 20rpx;
			}
			
			.title{
				font-size: 30rpx;
				font-weight: 600;
				color: $text-color-base;
			}
		}
	}
	 // 积分信息
	 .info {
		 position: relative;
		 background-color: #fff;
		 margin: 0 30rpx 30rpx 30rpx;
		 padding: 30rpx;
		 display: flex;
		 align-items: center;
		 justify-content: center;
		 border-radius: $boder-radius-base;
		 box-shadow: $box-shadow;
		 .integral-section {
			 flex: 1;
			 flex-direction: column;
			 display: flex;
			 .top {
				 display: flex;
				 align-items: center;
				 .title {
					 color: $text-color-base;
					 font-size: $font-size-base;
					 margin-right: -80rpx;
				 }
				 .vale {
					 font-size: 40rpx;
					 font-weight: bold;
				 }
			 }
			 .bottom {
				display: flex;
				color: $text-color-assist;
				font-size: $font-size-sm;
				align-items: center;
			 }
		 }
		 //会员码
		.qrcode-section {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: $font-size-sm;
			color: $color-primary;
			.image {
				width: 40rpx;
				height: 40rpx;
				margin-bottom: 12rpx;
			}
		}
	 }
	 // 奈雪茶商城
	 .navigator {
		 width: 100%;
		 margin-bottom: 20rpx;
		 border-radius: 10rpx;
		 background-color: $box-shadow;
		 padding: 20rpx;
		 display: flex;
		 align-items: stretch;
		 
		 .left {
			 width: 340rpx;
			 margin-right: 20rpx;
			 display:flex;
			 padding: 0 20rpx;
			 flex-direction: column;
			 color: $text-color-base;
			 background-color: #f2f2e6;
			 
			 .grid {
				 display: flex;
				 height: 50%;
			 }
			 
			 &-text {
				 margin-left: 40rpx;
				 font-size: 20rpx;
			 }
		 }
		 
		 .mark-img {
			 width: 30rpx;
			 height: 30rpx;
			 margin-right: 10rpx;
		 }
		 
		 .yzclh-image {
			 height: 122.96rpx;
			 width: 214.86rpx;
		 }
		 
		 .right {
			 width: 390rpx;
			 display: flex;
			 flex-direction: column;
			}
			 
			 .tea-activity,
			 .member-gifts {
				width: 100%;
				display: flex;
				padding: 20rpx;
				font-size: $font-size-sm;
				color: $text-color-base;
				align-items: center;
				position: relative;
			 }
			 
			 .tea-activity {
				 background-color: #fdf3f2;
				 margin-bottom: 20rpx;
			 }
			 
			 .member-gifts {
				 background-color: #fcf6d4;
			 }
			 
			 .right-img {
				 flex: 1;
				 position: relative;
				 margin: 0 20rpx -20rpx -20rpx;
				 display: flex;
				 align-items: flex-end;
				 
				 image {
					 width: 100%;
				 }
			 }
	 }
	 .member-news {
	 	width: 100%;
	 	margin-bottom: 30rpx;
	 	.header {
	 		display: flex;
	 		align-items: center;
	 		justify-content: space-between;
	 		padding: 20rpx 0;
	 		
	 		.title {
	 			font-size: $font-size-lg;
	 			font-weight: bold;
	 		}
	 		
	 		.iconfont {
	 			font-size: 52rpx;
	 			color: $text-color-assist;
	 		}
	 	}
	 	
	 	.list {
	 		width: 100%;
	 		display: flex;
	 		flex-direction: column;
	 		
	 		.item {
	 			width: 100%;
	 			height: 240rpx;
	 			position: relative;
	 			
	 			image {
	 				width: 100%;
	 				height: 100%;
	 				border-radius: 8rpx;
	 			}
	 			
	 			.title {
	 				position: relative;
	 				font-size: 32rpx;
	 				font-weight: 500;
	 				width: 100%;
	 				top: -70rpx;
	 				left: 16rpx;
	 				color: #ffffff;
	 			}
	 		}
	 	}
	 }
	 .member-news {
	 	width: 100%;
	 	margin-bottom: 30rpx;
		padding: 0 30rpx;
	 	.header {
	 		display: flex;
	 		align-items: center;
	 		justify-content: space-between;
	 		padding: 20rpx 0;
	 		
	 		.title {
	 			font-size: $font-size-lg;
	 			font-weight: bold;
	 		}
	 		
	 		.iconfont {
	 			font-size: 52rpx;
	 			color: $text-color-assist;
	 		}
	 	}
	 	
	 	.list {
	 		width: 100%;
	 		display: flex;
	 		flex-direction: column;
	 		
	 		.item {
	 			width: 100%;
	 			height: 240rpx;
	 			position: relative;
	 			
	 			image {
	 				width: 100%;
	 				height: 100%;
	 				border-radius: 8rpx;
	 			}
	 			
	 			.title {
	 				position: relative;
	 				font-size: 32rpx;
	 				font-weight: 500;
	 				width: 100%;
	 				top: -70rpx;
	 				left: 16rpx;
	 				color: #ffffff;
	 			}
	 		}
	 	}
	 }
</style>
